<template>
  <div class="cartBody">
    <div class="cartItem clear"
         v-for="(item,index) in this.$store.state.cartlist"
         :key="index"
         :data-id="item.good_id">
      <span class="check"
            :class="{checked:item.type}"
            @click="chose(item)">
        <i>√</i>
      </span>
      <a href="javascript:void(0);"
         class="itemPic">
        <img :src="item.src"
             alt />
        <div class="iteminfo">
          <p v-text="item.name"></p>
          <div class="priceBox">
            <div class="price">
              <em>￥</em>
              <span v-text="item.price"></span>
            </div>
            <div class="numBox">
              <a href="javascript:void(0);"
                 class="minCount"
                 :class="{disable:item.num==1}"
                 @click="reduce(index,item.good_id)">-</a>
              <span>{{item.num}}</span>
              <a href="javascript:void(0);"
                 class="maxCount"
                 @click="plus(index,item.good_id)">+</a>
            </div>
          </div>
        </div>
      </a>
    </div>
    <div class="itemBar base"
         v-show="this.$store.state.carttype">
      <div class="totalPrice">
        <p>
          合计：
          <span class="price">￥{{totalPrice}}</span>
        </p>
      </div>
      <a href="javascript:void(0);"
         class="pay"
         :class="{cantpay:this.$store.state.cartlist.filter(item=>item.type==true).length==0}"
         @click="pay()">去结算( {{totalPcs}} )</a>
    </div>
    <div class="itemBar"
         v-show="!this.$store.state.carttype">
      <div class="pickall clear">
        <span class="checkall"
              :class="{checked:alltype==true}"
              @click="pickall()">
          <i>√</i>
        </span>
        <span class="qx">全选</span>
      </div>
      <div class="totalnum">
        <p>共{{totalPcs}}件商品</p>
      </div>
      <a href="javascript:void(0);"
         class="del"
         @click="del()">删除所选</a>
    </div>
  </div>
</template>
<script>
import $ from "../../node_modules/jquery/dist/jquery";
export default {
  data () {
    return {
      alltype: false
    };
  },
  methods: {
    chose (item) {
      item.type = !item.type;
      if (this.$store.state.cartlist.every(item => item.type == true) == true) {
        this.alltype = true;
      } else {
        this.alltype = false;
      }
    },
    pickall () {
      this.alltype = !this.alltype;
      this.$store.state.cartlist.forEach(item => (item.type = this.alltype));
    },
    plus (index, good_id) {
      let id;
      if (localStorage.checked == "true") {
        id = localStorage.id;
      } else if (localStorage.checked == "false") {
        id = sessionStorage.id;
      }
      $.ajax({
        type: "post",
        url: "/goods/cart",
        data: { type: "update", flag: "plus", good_id, id },
        dataType: "json",
        success: response => {
          if (response.msg == "修改成功") {
            this.$store.state.cartlist[index].num++;
            this.$store.state.cart++;
          }
        }
      });
    },
    reduce (index, good_id) {
      if (this.$store.state.cartlist[index].num > 1) {
        let id;
        if (localStorage.checked == "true") {
          id = localStorage.id;
        } else if (localStorage.checked == "false") {
          id = sessionStorage.id;
        }
        $.ajax({
          type: "post",
          url: "/goods/cart",
          data: { type: "update", flag: "reduce", good_id, id },
          dataType: "json",
          success: response => {
            if (response.msg == "修改成功") {
              this.$store.state.cartlist[index].num--;
              this.$store.state.cart--;
            }
          }
        });
      }
    },
    del () {
      for (let i = 0; i < this.$store.state.cartlist.length; i++) {
        if (this.$store.state.cartlist[i].type == true) {
          let id;
          if (localStorage.checked == "true") {
            id = localStorage.id;
          } else if (localStorage.checked == "false") {
            id = sessionStorage.id;
          }
          $.ajax({
            type: "post",
            url: "/goods/cart",
            data: {
              type: "del",
              good_id: this.$store.state.cartlist[i].good_id,
              id
            },
            dataType: "json",
            success: response => {
              if (response.msg == "删除成功") {
                response.msg = "删除成功";
              }
            }
          });
          // this.$store.state.cart--;
          this.$store.state.cart = this.$store.state.cart - this.$store.state.cartlist[i].num
          this.$store.state.cartlist.splice(i, 1);
          i--;
        }
      }
    },
    pay () {
      if (this.$store.state.cartlist.filter(item => item.type == true).length) {
        this.$router.push("/order")
      }
    }
  },
  computed: {
    totalPrice: {
      get () {
        let price = 0;
        this.$store.state.cartlist.forEach(item => {
          if (item.type == true) {
            price = price + item.num * 1 * (item.price * 1);
          }
        });
        return price;
      }
    },
    totalPcs: {
      get () {
        let num = 0;
        this.$store.state.cartlist.forEach(item => {
          if (item.type == true) {
            num = num + item.num * 1
          }
        });
        return num;
      }
    }
  }

}

</script>
<style scoped>
.cartBody {
  width: 100%;
  overflow-y: auto;
  flex: 1;
  position: relative;
}
.cartItem {
  position: relative;
  border-radius: 0.2rem;
  box-shadow: 0 0.04rem 0.2rem 0 rgba(0, 0, 0, 0.08);
  background-color: #fff;
  margin: 7px 14px 15px;
  display: flex;
  align-items: center;
}
.check {
  border-color: rgb(204, 204, 204);
  width: 0.32rem;
  height: 0.32rem;
  background: #f5f5f5;
  display: inline-block;
  border: 0.02rem solid #ccc;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 0.4rem;
  margin-top: -0.16rem;
  margin-left: -0.16rem;
}
.check i {
  border-radius: 100%;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0.32rem;
  font-size: 0.28rem;
  color: white;
}
.cartItem .itemPic {
  display: flex;
  margin-left: 0.8rem;
  margin-right: 0.24rem;
  padding-top: 0.28rem;
}

.cartItem .itemPic img {
  width: 1.8rem;
  height: 1.8rem;
  padding-bottom: 14px;
}
.iteminfo {
  margin-left: 0.2rem;
  padding-bottom: 0.28rem;
  justify-content: space-between;
  flex-direction: column;
  display: flex;
  color: #000000;
  font-size: 0.24rem;
  align-content: space-between;
}
.priceBox {
  font-size: 0.34rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price {
  color: #f21c1c;
}
.price em {
  font-style: normal;
}
.numBox {
  display: flex;
  font-size: 0.24rem;
  color: #000000;
  width: 1.12rem;
  height: 0.36rem;
}

.numBox a {
  display: block;
  width: 0.32rem;
  height: 0.32rem;
  text-align: center;
  line-height: 0.32rem;
  border: 1px solid #f5f5f5;
  background-color: #f5f5f5;
  color: #333333;
}
.minCount {
  border-radius: 0.24rem 0 0 0.24rem;
}
.maxCount {
  border-radius: 0 0.24rem 0.24rem 0;
}
.numBox span {
  display: block;
  width: 0.4rem;
  height: 0.36rem;
  line-height: 0.36rem;
  text-align: center;
}
.numBox .disable {
  color: #ccc;
}
.cartBody .checked {
  border-color: rgb(242, 28, 28);
  background: rgb(242, 28, 28);
}
.itemBar {
  width: 6.94rem;
  height: 0.7rem;
  padding: 0 0.28rem;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  display: flex;
  position: fixed;
  bottom: 1.05rem;
  background-color: white;
}

.totalPrice {
  width: 4.74rem;
  height: 0.28rem;
  margin-right: 10px;
  font-size: 0.28rem;
  line-height: 0.28rem;
  align-items: center;
  display: flex;
  flex-flow: row-reverse;
}
.price {
  color: rgb(242, 28, 28);
}
.pay {
  width: 1.8rem;
  height: 0.7rem;
  box-shadow: 0 0.04rem 0.2rem 0 rgba(242, 28, 28, 0.2);
  border-radius: 0.36rem;
  line-height: 0.7rem;
  text-align: center;
  display: block;
  font-size: 0.28rem;
  background-color: rgb(242, 28, 28);
  color: white;
}
.cantpay {
  background-color: #dfdfdf;
}
.pickall {
  width: 1.02rem;
  height: 0.36rem;
  margin-left: 10px;
  display: flex;
  flex-flow: row;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
}
.qx {
  width: 0.56rem;
  height: 0.28rem;
  font-size: 0.28rem;
  line-height: 0.28rem;
  color: #333333;
  margin-left: 5px;
}

.checkall {
  border-color: rgb(204, 204, 204);
  width: 0.32rem;
  height: 0.32rem;
  background: #f5f5f5;
  display: block;
  border: 0.02rem solid #ccc;
  border-radius: 100%;
}
.checkall i {
  border-radius: 100%;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0.32rem;
  font-size: 0.28rem;
  color: white;
}
.totalnum {
  width: 3.72rem;
  height: 0.28rem;
  margin-right: 10px;
  align-items: flex-end;
  justify-content: center;
  flex-flow: column;
  display: flex;
}
.totalnum p {
  height: 0.28rem;
  color: #9c9c9c;
  font-size: 0.28rem;
  line-height: 0.28rem;
}
.del {
  width: 1.8rem;
  height: 0.7rem;
  box-shadow: 0 2px 10px 0 rgba(242, 28, 28, 0.2);
  border-radius: 18px;
  line-height: 0.7rem;
  text-align: center;
  background-color: rgb(242, 28, 28);
  color: white;
  font-size: 0.28rem;
  display: block;
}
</style>